<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>前台用户首页</title>
<link type="text/css" rel="stylesheet" href="${ctx }/resources/css/bootstrap.min.css"/>
<script type="text/javascript" src="${ctx }/resources/js/jquery-3.1.0.min.js"></script>
</head>

<body>
前台用户首页
<div>
	
	<form id="form" action="${ctx }/queryData" method="post">
		<div class="form-group">
			 <div class="col-sm-3">
				<select class="form-control" name="type">
					<option <c:if test="${type == 'material' }">selected</c:if> value="material">素材相关的</option>
					<option <c:if test="${type == 'filter' }">selected</c:if> value="filter">滤镜相关的</option>
					<option <c:if test="${type == 'client' }">selected</c:if> value="client">用户行为相关的</option>
					<option <c:if test="${type == 'picShare' }">selected</c:if> value="picShare">用户分享照片渠道统计</option>
				</select>
			</div>
			<div class="col-sm-3">
				<select class="form-control" name="versionType">
					<option <c:if test="${versionType == 'ios' }">selected</c:if> value="ios">IOS系统</option>
					<option <c:if test="${versionType == 'android' }">selected</c:if> value="android">安卓系统</option>
				</select>
			</div>
		</div>
		<input id="queryData" type="submit" class="btn btn-default" value="查询"/> <%-- <a href="${ctx }/exportExcel">导出表格</a> --%>
		<button id="exportExcel" class="btn btn-default">导出表格</button>
	</form>
	
	<c:if test="${! empty  materialCounts}">
	<div>版本类型：${versionType } </div>
	<table class="table table-bordered">
			<tr>
				<td>素材uuid</td>
				<td>素材下载量</td>
				<td>素材制作视频数量</td>
				<td>素材拍照数量</td>
				<td>素材图片的分享量</td>
				<td>素材的视频的分享量</td>
			</tr>
		
		<c:forEach items="${materialCounts }" var="count">
		<tr>
			<td>${count.uuid }</td>
			<td>${count.downloadNum }</td>
			<td>${count.makeVideoNum }</td>
			<td>${count.photographNum }</td>
			<td>${count.picShareNum }</td>
			<td>${count.videoShareNum }</td>
		</tr>
		</c:forEach>	
	</table>
	</c:if>
	
	<c:if test="${! empty filters }">
	<div>版本类型：${versionType } </div>
	<div>
	<table class="table table-bordered">
	  <caption>滤镜相关统计</caption>
	  <thead>
	    <tr>
	       <th>滤镜名字</th>
	      <th>通用滤镜的使用量</th>
	      <th>通用滤镜的制作量</th>
	    </tr>
	  </thead>
	  <tbody>
	  	<c:forEach items="${filters }" var="filter">
		    <tr>
		      <td>${filter.filterName }</td>
		      <td>${filter.useNum }</td>
		      <td>${filter.makeNum }</td>
		    </tr>
	    </c:forEach>
	  </tbody>
	</table>
	</div>
	</c:if>
	
	<c:if test="${! empty userActionMsg }">
	<div>版本类型：${versionType } </div>
		<div>
	<table class="table table-bordered">
	  <caption>用户行为相关统计</caption>
	  <thead>
	    <tr>
	       <th>男用户数量</th>
	      <th>女用户数量</th>
	      <th>用户关闭声音的次数</th>
	      <th>用户开启闪光灯的次数</th>
	      <th>用户切换摄像头的次数</th>
	      <th>用户使用滤镜快速切换的次数</th>
	      <th>用户录制视频的平均时长</th>
	      <th>用户分享推荐链接数统计</th>
	      <th>用户保存视频到本地的次数</th>
	      <th>用户保存照片到本地的次数</th>
	      <th>用户分享视频数统计</th>
	    </tr>
	  </thead>
	  <tbody>
		    <tr>
		      <td>${userActionMsg.maleNum }</td>
		      <td>${userActionMsg.femaleNum }</td>
		      <td>${userActionMsg.closeSoundNum }</td>
		      <td>${userActionMsg.openFlashLightNum }</td>
		      <td>${userActionMsg.switchCameraNum }</td>
		      <td>${userActionMsg.switchFilterNum }</td>
		      <td>${userActionMsg.avgRecordVideoTime }</td>
		      <td>${userActionMsg.linkShareNum }</td>
		      <td>${userActionMsg.saveVideoNum }</td>
		      <td>${userActionMsg.savePictureNum }</td>
		      <td>${userActionMsg.shareVideoNum }</td>
		    </tr>
	  </tbody>
	</table>
	</div>
	
	</c:if>
	
	<c:if test="${! empty picShareData }">
	<div>版本类型：${versionType } </div>
	<div>
	<table class="table table-bordered">
	  <caption>用户分享照片渠道统计</caption>
	  <thead>
	    <tr>
	       <th>分享渠道名称</th>
	      <th>分享数量</th>
	    </tr>
	  </thead>
	  <tbody>
	  	<c:forEach items="${picShareData }" var="data">
		    <tr>
		      <td>${data.key }</td>
		      <td>${data.value }</td>
		    </tr>
	    </c:forEach>
	  </tbody>
	</table>
	</div>
	</c:if>
	
</div> 
<script type="text/javascript">
$(function(){
	$("#exportExcel").click(function(){
		$("#form").attr("action","${ctx}/exportExcel");
		$("#form").submit();
	});
	
	$("#queryData").click(function(){
		$("#form").attr("action","${ctx}/queryData");
		$("#form").submit();
	});
});

</script>
</body>
</html>